<div data-lift="surround?with=hello;at=hello">
  <title data-lift="TopicSnippet.detailTitle"> - 主题 - Hello, Scala!</title>

  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-md-3 col-lg-3">
        <div data-lift="TopicSnippet.authorInfo"></div>
        <div data-lift="embed?what=/p/topic/_account_topics"></div>
        <div data-lift="embed?what=/p/user/_user_tags"></div>
      </div>

      <div class="col-sm-9 col-md-9 col-lg-9">
        <div class="panel panel-default" data-lift="TopicSnippet.show">
          <div class="panel-heading">
            <div class="pull-right">
              <img src="/assets/img/logo-1-100.png" style="width:48px;"/>
            </div>
            <div style="margin-right:48px;">
              <strong class="panel-title">#标题#</strong>&nbsp;&nbsp;
              <a title="编辑" herf="/u/${account}/topic/${topicId}/edit">
                <i class="fa fa-edit"></i>
              </a>

              <div class="text-muted">32lk4j23lk4j</div>
            </div>
            <div class="clearfix"></div>
          </div>
          <ul class="list-group">
            <li class="list-group-item data-labels">
              <strong>标签：</strong><a target="_blank"><label class="label label-default">#标签#</label></a>
            </li>
            <li class="list-group-item">
              <div id="topic-content">#正文#</div>
            </li>
          </ul>
        </div>
        <!-- @comments -->
        <div class="panel panel-default" data-lift="TopicSnippet.comments">
          <div class="panel-heading">
            <span class="text-muted">共收到<span name="comment-size">#数量#</span>评论</span>
          </div>

          <ul class="list-group comments" id="topic-comments">
            <li class="list-group-item"></li>
          </ul>
        </div>
        <!-- #comments -->
        <div class="panel panel-default" data-lift="TopicSnippet.comment">
          <ul class="list-group">
            <li class="list-group-item">
              <div class="form" data-lift="form.ajax?class=form">
                <div class="form-group">
                  <ul class="nav nav-tabs" id="topic-tab">
                    <li class="active">
                      <a href="#topic-comment-editor" data-toggle="tab">编辑</a>
                    </li>
                    <li>
                      <a href="#topic-comment-preview" data-toggle="tab">预览</a>
                    </li>
                  </ul>
                  <div class="space-10"></div>
                  <div class="tab-content">
                    <div class="tab-pane active" id="topic-comment-editor">
                      <textarea class="form-control topic-editor" rows="5" name="comment" placeholder="在此输入评论（支持Markdown）"></textarea>
                    </div>
                    <div class="tab-pane" id="topic-comment-preview">
                      <div class="topic-preview" style="min-height:64px;"></div>
                    </div>
                  </div>
                  <!--<textarea rows="5" class="form-control" name="comment" placeholder="在此输入评论"></textarea>-->
                </div>
                <div class="form-group">
                  <button type="submit" class="btn btn-default pull-right">发表评论</button>
                  <input type="hidden" name="submit"/>

                  <div class="clearfix"></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script data-lift="tail" src="/assets/js/hello.topic.show.js" type="text/javascript"></script>
</div>
